<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-form
            ref="queryForm"
            :model="queryParams"
            :inline="true"
            label-width="110px"
          >
            <el-form-item class="right">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
              >搜索</el-button>
            </el-form-item>
            <el-form-item class="right">
              <el-input
                v-model="queryParams.username"
                placeholder="请输入用户名搜索"
                clearable
                size="small"
                style="width: 240px"
              />
            </el-form-item>
          </el-form>

          <el-table
            v-loading="loading"
            :data="userList"
            border
          >
            <el-table-column
              label="用户名"
              align="center"
              prop="userName"
              :show-overflow-tooltip="true"
            />

            <el-table-column
              label="时间"
              align="center"
              prop="createTime"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作说明"
              align="center"
              prop="operateDesc"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="IP"
              align="center"
              prop="ip"
              :show-overflow-tooltip="true"
            />
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            @pagination="getList"
          />
          <!-- </el-col> -->
        </el-row>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import {
  loginLog
} from '@/api/user';

export default {
  name: 'User',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      // 部门名称
      deptName: undefined,
      // 表单参数
      form: {},
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        username: ''
      }
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    console.log(this.$router);
  },
  methods: {

    /** 查询用户列表 */
    getList() {
      this.loading = true;
      loginLog(this.queryParams).then((res) => {
        console.log(res);
        this.userList = res.data;
        this.total = res.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.createBut {
  margin-bottom: 20px;
}
</style>
